<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>问答详情 - 社交问答社区</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #333;
      padding-bottom: 80px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: #4285f4;
      padding: 15px 15px;
      color: white;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .nav-btn {
      color: white;
      font-size: 20px;
    }
    
    /* 问答详情容器 */
    .question-detail {
      background-color: white;
      padding: 15px;
      margin-bottom: 10px;
    }
    
    /* 提问者信息 */
    .question-author {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }
    
    .author-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .author-info {
      flex: 1;
    }
    
    .author-name {
      font-weight: 600;
      font-size: 15px;
      margin-bottom: 2px;
    }
    
    .question-meta {
      font-size: 12px;
      color: #999;
    }
    
    /* 问答内容 */
    .question-title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 12px;
      line-height: 1.5;
    }
    
    .question-content {
      font-size: 16px;
      line-height: 1.6;
      margin-bottom: 15px;
      color: #333;
    }
    
    /* 问答图片 */
    .question-images {
      margin-bottom: 15px;
    }
    
    .single-image {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 10px;
    }
    
    .multi-images {
      display: flex;
      gap: 5px;
      margin-bottom: 10px;
    }
    
    .multi-images img {
      flex: 1;
      border-radius: 6px;
      height: 120px;
      object-fit: cover;
    }
    
    /* 问答标签 */
    .question-tags {
      margin-bottom: 15px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .question-tag {
      padding: 4px 10px;
      background-color: #e8f0fe;
      color: #4285f4;
      border-radius: 4px;
      font-size: 13px;
    }
    
    /* 问答操作区 */
    .question-actions {
      display: flex;
      justify-content: center;
      padding: 10px 0;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      margin-bottom: 15px;
    }
    
    .action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      flex: 1;
      color: #666;
      font-size: 12px;
      background: none;
      border: none;
    }
    
    .action-btn i {
      font-size: 18px;
      margin-bottom: 5px;
    }
    
    .action-btn.active {
      color: #4285f4;
    }
    
    /* 回答区域 */
    .answers-section {
      background-color: white;
      padding: 15px;
      margin-bottom: 10px;
    }
    
    .answers-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #eee;
    }
    
    .answers-count {
      font-weight: 600;
      color: #333;
    }
    
    .sort-answers {
      color: #4285f4;
      font-size: 14px;
      background: none;
      border: none;
      display: flex;
      align-items: center;
    }
    
    .sort-answers i {
      margin-left: 5px;
      font-size: 12px;
    }
    
    /* 回答项 */
    .answer-item {
      padding: 15px 0;
      border-bottom: 1px solid #eee;
    }
    
    .answer-item:last-child {
      border-bottom: none;
    }
    
    .answer-author {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
    
    .answer-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .answer-info {
      flex: 1;
    }
    
    .answer-name {
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 2px;
    }
    
    .answer-meta {
      font-size: 12px;
      color: #999;
    }
    
    .answer-content {
      font-size: 15px;
      line-height: 1.6;
      margin-bottom: 10px;
    }
    
    .answer-images {
      margin-bottom: 10px;
    }
    
    .answer-actions {
      display: flex;
      align-items: center;
      font-size: 13px;
      color: #666;
    }
    
    .answer-action {
      display: flex;
      align-items: center;
      margin-right: 15px;
      cursor: pointer;
    }
    
    .answer-action i {
      margin-right: 5px;
      font-size: 14px;
    }
    
    .answer-action.active {
      color: #ea4335;
    }
    
    /* 回复区域 */
    .replies-section {
      margin-left: 46px;
      margin-top: 10px;
    }
    
    .reply-item {
      background-color: #f9f9f9;
      padding: 10px;
      border-radius: 8px;
      margin-bottom: 10px;
    }
    
    .reply-header {
      display: flex;
      margin-bottom: 5px;
    }
    
    .reply-author {
      font-weight: 600;
      font-size: 13px;
      margin-right: 8px;
    }
    
    .reply-time {
      font-size: 11px;
      color: #999;
    }
    
    .reply-content {
      font-size: 14px;
      margin-bottom: 5px;
    }
    
    .reply-actions {
      display: flex;
      font-size: 12px;
      color: #666;
    }
    
    .reply-action {
      display: flex;
      align-items: center;
      margin-right: 12px;
      cursor: pointer;
    }
    
    .reply-action i {
      margin-right: 3px;
      font-size: 11px;
    }
    
    .reply-action.active {
      color: #ea4335;
    }
    
    .reply-form {
      margin-left: 46px;
      margin-top: 10px;
      margin-bottom: 15px;
    }
    
    /* 评论输入框 */
    .comment-input-container {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      padding: 10px 15px;
      border-top: 1px solid #eee;
      z-index: 90;
    }
    
    .comment-input-group {
      display: flex;
      align-items: center;
    }
    
    .comment-input {
      flex: 1;
      padding: 10px 15px;
      border: 1px solid #ddd;
      border-radius: 20px;
      font-size: 14px;
      outline: none;
      resize: none;
      height: 40px;
    }
    
    .send-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background-color: #4285f4;
      color: white;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 10px;
    }
    
    .input-tools {
      display: flex;
      margin-top: 5px;
      color: #666;
    }
    
    .input-tool {
      margin-right: 15px;
      font-size: 18px;
      cursor: pointer;
    }
    
    /* 底部操作栏 */
    .bottom-actions {
      display: flex;
      padding: 10px 15px;
      background-color: white;
      border-top: 1px solid #eee;
      position: sticky;
      bottom: 65px;
      z-index: 80;
    }
    
    .bottom-action {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      font-size: 14px;
      padding: 8px 0;
    }
    
    .bottom-action i {
      margin-right: 5px;
    }
    
    .bottom-action.primary {
      color: #4285f4;
    }
    
    /* 加载更多 */
    .load-more {
      text-align: center;
      padding: 15px;
      color: #4285f4;
      font-size: 15px;
      background-color: white;
      margin-bottom: 10px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav">
    <button class="btn btn-link p-0 nav-btn" onclick="history.back()">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">问答详情</h1>
    <button class="btn btn-link p-0 nav-btn">
      <i class="fa fa-share-alt"></i>
    </button>
  </div>
  
  <!-- 问答详情 -->
  <div class="question-detail">
    <div class="question-author">
      <img src="https://picsum.photos/100/100?random=1" alt="提问者头像" class="author-avatar">
      <div class="author-info">
        <div class="author-name">旅行者小A</div>
        <div class="question-meta">发布于 2小时前 · 浏览 356</div>
      </div>
      <button class="btn btn-sm btn-primary">关注</button>
    </div>
    
    <h2 class="question-title">云南丙察察公路现在路况如何？普通SUV能通行吗？</h2>
    
    <div class="question-content">
      计划下个月自驾去丙察察，不知道现在路况怎么样，我的车是普通城市SUV，没有四驱功能，能顺利通过吗？需要准备哪些装备？另外，这个季节去的话，天气怎么样？需要特别注意什么？有没有最近去过的朋友分享一下经验？
    </div>
    
    <div class="question-images">
      <div class="multi-images">
        <img src="https://picsum.photos/400/300?random=10" alt="丙察察公路图片1">
        <img src="https://picsum.photos/400/300?random=11" alt="丙察察公路图片2">
      </div>
    </div>
    
    <div class="question-tags">
      <span class="question-tag">旅行</span>
      <span class="question-tag">自驾游</span>
      <span class="question-tag">云南</span>
      <span class="question-tag">路况</span>
    </div>
    
    <div class="question-actions">
      <button class="action-btn">
        <i class="fa fa-thumbs-o-up"></i>
        <span>24 赞同</span>
      </button>
      <button class="action-btn">
        <i class="fa fa-comment-o"></i>
        <span>12 回答</span>
      </button>
      <button class="action-btn">
        <i class="fa fa-bookmark-o"></i>
        <span>收藏</span>
      </button>
      <button class="action-btn">
        <i class="fa fa-flag-o"></i>
        <span>举报</span>
      </button>
    </div>
  </div>
  
  <!-- 回答区域 -->
  <div class="answers-section">
    <div class="answers-header">
      <div class="answers-count">12 个回答</div>
      <button class="sort-answers">
        按最佳回答排序
        <i class="fa fa-chevron-down"></i>
      </button>
    </div>
    
    <!-- 最佳回答 -->
    <div class="answer-item">
      <div class="answer-author">
        <img src="https://picsum.photos/100/100?random=5" alt="回答者头像" class="answer-avatar">
        <div class="answer-info">
          <div class="answer-name">老司机老王 <span class="badge bg-primary text-white">旅行达人</span></div>
          <div class="answer-meta">回答于 1小时前</div>
        </div>
      </div>
      
      <div class="answer-content">
        我上周刚从丙察察回来，可以给你一些最新信息：
        <br><br>
        1. 路况：目前丙察察大部分路段已经硬化，但仍有大约30公里的非铺装路面，主要集中在察瓦龙到察隅段，普通SUV谨慎驾驶可以通过，但建议结伴而行。
        <br><br>
        2. 装备：必须准备备胎、防滑链、拖车绳，最好有车载电台，部分路段没有手机信号。
        <br><br>
        3. 天气：这个季节晚上气温可能低于零度，会有霜冻，建议携带保暖装备。
        <br><br>
        另外，需要办理边防证，请提前在户籍所在地办好。
      </div>
      
      <div class="answer-images">
        <img src="https://picsum.photos/800/500?random=30" alt="路况图片" class="single-image">
      </div>
      
      <div class="answer-actions">
        <div class="answer-action">
          <i class="fa fa-thumbs-o-up"></i>
          <span>56</span>
        </div>
        <div class="answer-action">
          <i class="fa fa-comment-o"></i>
          <span>8 回复</span>
        </div>
        <div class="answer-action">
          <i class="fa fa-check-circle-o"></i>
          <span>采纳为最佳</span>
        </div>
      </div>
      
      <!-- 回复列表 -->
      <div class="replies-section">
        <div class="reply-item">
          <div class="reply-header">
            <div class="reply-author">旅行者小A</div>
            <div class="reply-time">30分钟前</div>
          </div>
          <div class="reply-content">
            非常感谢！请问非铺装路面大概需要开多久？普通SUV的底盘会不会太低？
          </div>
          <div class="reply-actions">
            <div class="reply-action">
              <i class="fa fa-thumbs-o-up"></i>
              <span>3</span>
            </div>
            <div class="reply-action">
              <i class="fa fa-reply"></i>
              <span>回复</span>
            </div>
          </div>
        </div>
        
        <div class="reply-item">
          <div class="reply-header">
            <div class="reply-author">老司机老王</div>
            <div class="reply-time">20分钟前</div>
          </div>
          <div class="reply-content">
            @旅行者小A 非铺装路面大概需要2-3小时，主要看驾驶技术。普通SUV底盘确实有点低，遇到坑洼要特别小心，建议慢速通过。
          </div>
          <div class="reply-actions">
            <div class="reply-action">
              <i class="fa fa-thumbs-o-up"></i>
              <span>7</span>
            </div>
            <div class="reply-action">
              <i class="fa fa-reply"></i>
              <span>回复</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 回复输入框 -->
      <div class="reply-form">
        <div class="input-group">
          <input type="text" class="form-control form-control-sm" placeholder="回复 @老司机老王 ...">
          <button class="btn btn-sm btn-primary ms-2">回复</button>
        </div>
      </div>
    </div>
    
    <!-- 其他回答 -->
    <div class="answer-item">
      <div class="answer-author">
        <img src="https://picsum.photos/100/100?random=6" alt="回答者头像" class="answer-avatar">
        <div class="answer-info">
          <div class="answer-name">自驾爱好者小李</div>
          <div class="answer-meta">回答于 1.5小时前</div>
        </div>
      </div>
      
      <div class="answer-content">
        补充一点：如果你的SUV没有四驱，遇到雨天就非常困难了，丙察察下雨后路面会变得很泥泞湿滑。建议出发前查看未来一周的天气预报，尽量选择连续晴天通过。
        <br><br>
        另外，沿途住宿条件有限，察瓦龙的住宿相对好一些，可以作为中途休息点。
      </div>
      
      <div class="answer-actions">
        <div class="answer-action">
          <i class="fa fa-thumbs-o-up"></i>
          <span>23</span>
        </div>
        <div class="answer-action">
          <i class="fa fa-comment-o"></i>
          <span>3 回复</span>
        </div>
        <div class="answer-action">
          <i class="fa fa-check-circle-o"></i>
          <span>采纳为最佳</span>
        </div>
      </div>
    </div>
    
    <div class="answer-item">
      <div class="answer-author">
        <img src="https://picsum.photos/100/100?random=7" alt="回答者头像" class="answer-avatar">
        <div class="answer-info">
          <div class="answer-name">户外探险家</div>
          <div class="answer-meta">回答于 2小时前</div>
        </div>
      </div>
      
      <div class="answer-content">
        我建议普通SUV不要尝试，去年我朋友的CR-V在那段路上托底了三次，最后还是叫了救援。如果一定要去，最好找当地向导带路，他们知道哪里有坑洼和危险路段。
      </div>
      
      <div class="answer-actions">
        <div class="answer-action">
          <i class="fa fa-thumbs-o-up"></i>
          <span>15</span>
        </div>
        <div class="answer-action">
          <i class="fa fa-comment-o"></i>
          <span>2 回复</span>
        </div>
        <div class="answer-action">
          <i class="fa fa-check-circle-o"></i>
          <span>采纳为最佳</span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 加载更多回答 -->
  <div class="load-more" id="loadMoreAnswers">
    <i class="fa fa-spinner fa-spin"></i> 加载更多回答
  </div>
  
  <!-- 底部操作栏 -->
  <div class="bottom-actions">
    <div class="bottom-action primary">
      <i class="fa fa-pencil"></i> 写回答
    </div>
    <div class="bottom-action">
      <i class="fa fa-share-alt"></i> 分享
    </div>
    <div class="bottom-action">
      <i class="fa fa-ellipsis-h"></i> 更多
    </div>
  </div>
  
  <!-- 评论输入框 -->
  <div class="comment-input-container">
    <div class="comment-input-group">
      <textarea class="comment-input" placeholder="写下你的评论..."></textarea>
      <button class="send-btn">
        <i class="fa fa-paper-plane"></i>
      </button>
    </div>
    <div class="input-tools">
      <div class="input-tool">
        <i class="fa fa-image"></i>
      </div>
      <div class="input-tool">
        <i class="fa fa-smile-o"></i>
      </div>
      <div class="input-tool">
        <i class="fa fa-at"></i>
      </div>
      <div class="input-tool">
        <i class="fa fa-camera"></i>
      </div>
    </div>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 点赞功能
    document.querySelectorAll('.answer-action, .reply-action').forEach(item => {
      if (item.querySelector('.fa-thumbs-o-up')) {
        item.addEventListener('click', function() {
          const icon = this.querySelector('i');
          const countEl = this.querySelector('span');
          
          if (countEl) {
            let count = parseInt(countEl.textContent);
            
            if (icon.classList.contains('fa-thumbs-o-up')) {
              icon.classList.remove('fa-thumbs-o-up');
              icon.classList.add('fa-thumbs-up');
              this.classList.add('active');
              countEl.textContent = count + 1;
            } else {
              icon.classList.remove('fa-thumbs-up');
              icon.classList.add('fa-thumbs-o-up');
              this.classList.remove('active');
              countEl.textContent = count - 1;
            }
          }
        });
      }
    });
    
    // 问题操作功能
    document.querySelectorAll('.question-actions .action-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const icon = this.querySelector('i');
        const text = this.querySelector('span').textContent;
        
        if (icon.classList.contains('fa-thumbs-o-up')) {
          icon.classList.remove('fa-thumbs-o-up');
          icon.classList.add('fa-thumbs-up');
          this.classList.add('active');
        } else if (icon.classList.contains('fa-thumbs-up')) {
          icon.classList.remove('fa-thumbs-up');
          icon.classList.add('fa-thumbs-o-up');
          this.classList.remove('active');
        } else if (icon.classList.contains('fa-bookmark-o')) {
          icon.classList.remove('fa-bookmark-o');
          icon.classList.add('fa-bookmark');
          this.classList.add('active');
          alert('已收藏该问题');
        } else if (icon.classList.contains('fa-bookmark')) {
          icon.classList.remove('fa-bookmark');
          icon.classList.add('fa-bookmark-o');
          this.classList.remove('active');
          alert('已取消收藏');
        } else if (icon.classList.contains('fa-flag-o')) {
          alert('举报功能：您确定要举报该问题吗？');
        }
      });
    });
    
    // 回复功能
    document.querySelectorAll('.reply-action').forEach(action => {
      if (action.querySelector('.fa-reply')) {
        action.addEventListener('click', function() {
          const replyForm = this.closest('.reply-item').nextElementSibling;
          if (replyForm && replyForm.classList.contains('reply-form')) {
            replyForm.querySelector('input').focus();
          }
        });
      }
    });
    
    // 发送评论
    document.querySelector('.send-btn').addEventListener('click', function() {
      const input = document.querySelector('.comment-input');
      const text = input.value.trim();
      
      if (text) {
        alert(`评论已发送：${text}`);
        input.value = '';
      }
    });
    
    // 回答排序
    document.querySelector('.sort-answers').addEventListener('click', function() {
      const options = [
        '按最佳回答排序',
        '按最新回答排序',
        '按赞同数排序'
      ];
      const currentText = this.textContent.trim();
      const currentIndex = options.indexOf(currentText);
      const nextIndex = (currentIndex + 1) % options.length;
      
      this.innerHTML = `${options[nextIndex]} <i class="fa fa-chevron-down"></i>`;
    });
    
    // 加载更多回答
    document.getElementById('loadMoreAnswers').addEventListener('click', function() {
      this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载中...';
      
      // 模拟加载延迟
      setTimeout(() => {
        const answersSection = document.querySelector('.answers-section');
        
        // 新增回答
        const newAnswer = `
          <div class="answer-item">
            <div class="answer-author">
              <img src="https://picsum.photos/100/100?random=${Math.floor(Math.random() * 100)}" alt="回答者头像" class="answer-avatar">
              <div class="answer-info">
                <div class="answer-name">越野爱好者小张</div>
                <div class="answer-meta">回答于 3小时前</div>
              </div>
            </div>
            
            <div class="answer-content">
              我觉得普通SUV可以尝试，但要注意以下几点：
              <br><br>
              1. 出发前检查轮胎状况，胎压适当降低一些，增加抓地力
              2. 遇到不确定的路段，先下车观察再决定是否通过
              3. 尽量白天行驶，避免夜间行车
              4. 提前下载离线地图，很多地方没有信号
            </div>
            
            <div class="answer-actions">
              <div class="answer-action">
                <i class="fa fa-thumbs-o-up"></i>
                <span>9</span>
              </div>
              <div class="answer-action">
                <i class="fa fa-comment-o"></i>
                <span>1 回复</span>
              </div>
              <div class="answer-action">
                <i class="fa fa-check-circle-o"></i>
                <span>采纳为最佳</span>
              </div>
            </div>
          </div>
        `;
        
        answersSection.insertAdjacentHTML('beforeend', newAnswer);
        this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载更多回答';
        
        // 为新添加的元素绑定事件
        bindNewAnswerEvents();
      }, 1500);
    });
    
    // 为新添加的回答绑定事件
    function bindNewAnswerEvents() {
      const newActions = document.querySelectorAll('.answer-action:not([data-bound])');
      newActions.forEach(item => {
        item.setAttribute('data-bound', 'true');
        
        if (item.querySelector('.fa-thumbs-o-up')) {
          item.addEventListener('click', function() {
            const icon = this.querySelector('i');
            const countEl = this.querySelector('span');
            let count = parseInt(countEl.textContent);
            
            if (icon.classList.contains('fa-thumbs-o-up')) {
              icon.classList.remove('fa-thumbs-o-up');
              icon.classList.add('fa-thumbs-up');
              this.classList.add('active');
              countEl.textContent = count + 1;
            } else {
              icon.classList.remove('fa-thumbs-up');
              icon.classList.add('fa-thumbs-o-up');
              this.classList.remove('active');
              countEl.textContent = count - 1;
            }
          });
        }
      });
    }
    
    // 底部操作按钮
    document.querySelectorAll('.bottom-action').forEach(action => {
      action.addEventListener('click', function() {
        if (this.querySelector('.fa-pencil')) {
          alert('跳转到回答编辑页面');
        } else if (this.querySelector('.fa-share-alt')) {
          alert('分享选项：微信、微博、QQ、复制链接');
        } else if (this.querySelector('.fa-ellipsis-h')) {
          alert('更多操作：收藏问题、举报问题、感谢作者等');
        }
      });
    });
    
    // 采纳最佳回答
    document.querySelectorAll('.answer-action').forEach(action => {
      if (action.querySelector('.fa-check-circle-o')) {
        action.addEventListener('click', function() {
          alert('已将该回答设为最佳答案');
          // 在实际应用中，这里会将该回答标记为最佳并刷新界面
        });
      }
    });
  </script>
</body>
</html>
